<template>
	<view class="app-container">
		<view class="container">
			<view class="page-back" @click="navigateBack">
				<text class="mdi mdi-arrow-left back-icon"></text>
				<text>返回公告列表</text>
			</view>

			<view class="header">
				<view class="title">
					<text class="mdi mdi-file-document-edit-outline icon-primary"></text>
					<text class="title-text">编辑公告</text>
				</view>
			</view>

			<view class="edit-form">
				<view class="form-group">
					<text class="label">公告标题</text>
					<uni-easyinput class="form-control" v-model="notice.title" placeholder="请输入公告标题（最多32个字符）"
						maxlength="32" />
					<text class="char-count">
						已输入 {{ notice.title ? notice.title.length : 0 }}/32
					</text>
				</view>

				<view class="form-group">
					<text class="label">公告内容</text>
					<uni-easyinput type="textarea" class="form-control" v-model="notice.data"
						placeholder="请输入公告内容（最多64个字符）" maxlength="64" />
					<text :class="[
						'char-count',
						{ 'warning': remainingChars <= 10 && remainingChars > 0 },
						{ 'error': remainingChars === 0 }
					]">
						剩余 {{ remainingChars }} 个字符
					</text>
				</view>

				<view class="form-group">
					<text class="label">状态</text>
					<view class="switch-wrapper">
						<switch class="switch" :checked="notice.active" @change="toggleActive" color="#2979ff" />
						<text :class="['status-label', notice.active ? 'active' : 'inactive']">
							{{ notice.active ? '生效中' : '已停用' }}
						</text>
					</view>
				</view>

				<view class="form-footer">
					<button class="btn btn-outline" @click="navigateBack" hover-class="btn-outline-hover">
						<text class="mdi mdi-close"></text>
						<text>取消</text>
					</button>
					<button class="btn btn-primary" @click="saveNotice" :disabled="isSaving"
						hover-class="btn-primary-hover">
						<text v-if="isSaving" class="mdi mdi-loading spin"></text>
						<text v-else class="mdi mdi-content-save"></text>
						<text>{{ isSaving ? '保存中...' : '更新公告' }}</text>
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				notice: {
					_id: '',
					title: '',
					data: '',
					active: true,
					create_time: null,
					update_time: null
				},
				isSaving: false
			};
		},
		computed: {
			remainingChars() {
				return 64 - (this.notice.data ? this.notice.data.length : 0);
			}
		},
		onLoad() {
			const notice = uni.$router.params.notice
			console.log(notice)
			if (notice) {
				this.notice = notice;
			}
		},
		methods: {
			toggleActive(e) {
				this.notice.active = e.detail.value;
			},
			navigateBack() {
				uni.navigateBack();
			},
			async saveNotice() {
				if (!this.notice.title.trim()) {
					uni.showToast({
						title: '标题不能为空',
						icon: 'none'
					});
					return;
				}
				if (!this.notice.data.trim()) {
					uni.showToast({
						title: '内容不能为空',
						icon: 'none'
					});
					return;
				}

				this.isSaving = true;
				const noticeApi = uniCloud.importObject('notice')
				try {
					const res = await noticeApi.saveNotice({
						...this.notice,
						update_time: Date.now()
					});
					if (res.code === 0) {
						uni.showToast({
							title: '更新成功'
						});
						setTimeout(() => {
							this.navigateBack();
						}, 1000); // 1000 毫秒 = 1 秒
					} else {
						throw new Error(res.message);
					}
				} catch (error) {
					console.error('更新失败:', error);
					uni.showToast({
						title: '更新失败，请重试',
						icon: 'none'
					});
				} finally {
					this.isSaving = false;
				}
			}
		}
	};
</script>

<style>
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
	}

	.app-container {
		background: linear-gradient(135deg, #f0f5ff 0%, #e6f0ff 100%);
		min-height: 100vh;
		padding: 20px 0;
	}

	.container {
		max-width: 1200px;
		margin: 0 auto;
		padding: 20px;
	}

	.page-back {
		display: flex;
		align-items: center;
		cursor: pointer;
		color: #2979ff;
		margin-bottom: 20px;
		font-weight: 500;
		padding: 8px 12px;
		border-radius: 8px;
		transition: all 0.2s;
		width: fit-content;
	}

	.page-back:active {
		background-color: rgba(41, 121, 255, 0.1);
	}

	.back-icon {
		margin-right: 8px;
		font-size: 20px;
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 24px;
		padding: 20px;
		background: white;
		border-radius: 16px;
		box-shadow: 0 6px 20px rgba(41, 121, 255, 0.1);
		position: relative;
		overflow: hidden;
	}

	.header::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 4px;
		height: 100%;
		background: linear-gradient(to bottom, #2979ff, #1a6cff);
	}

	.title {
		display: flex;
		align-items: center;
	}

	.icon-primary {
		font-size: 28px;
		color: #2979ff;
		margin-right: 12px;
	}

	.title-text {
		font-size: 22px;
		font-weight: 600;
		color: #1a1a1a;
	}

	.edit-form {
		background: white;
		border-radius: 18px;
		box-shadow: 0 8px 24px rgba(41, 121, 255, 0.08);
		padding: 32px;
		max-width: 800px;
		margin: 0 auto;
	}

	.form-group {
		margin-bottom: 28px;
	}

	.label {
		display: block;
		margin-bottom: 10px;
		font-weight: 500;
		color: #1a1a1a;
		font-size: 16px;
	}

	.form-control {
		width: 100%;
		padding: 14px 18px;
		border-radius: 14px;
		border: 1px solid #e0e7ff;
		font-size: 15px;
		transition: all 0.3s;
		background: #f8faff;
	}

	.form-control:focus {
		outline: none;
		border-color: #2979ff;
		box-shadow: 0 0 0 3px rgba(41, 121, 255, 0.15);
	}

	textarea.form-control {
		min-height: 140px;
		resize: vertical;
	}

	.char-count {
		text-align: right;
		font-size: 13px;
		color: #909399;
		margin-top: 8px;
	}

	.char-count.warning {
		color: #ff9800;
	}

	.char-count.error {
		color: #f44336;
		font-weight: 500;
	}

	.switch-wrapper {
		display: flex;
		align-items: center;
		gap: 12px;
	}

	.status-label {
		font-weight: 500;
	}

	.status-label.active {
		color: #2979ff;
	}

	.status-label.inactive {
		color: #909399;
	}

	.form-footer {
		display: flex;
		justify-content: flex-end;
		gap: 16px;
		margin-top: 32px;
		padding-top: 24px;
		border-top: 1px solid #f0f5ff;
	}

	.btn {
		padding: 12px 28px;
		border-radius: 12px;
		font-size: 15px;
		font-weight: 500;
		cursor: pointer;
		transition: all 0.3s;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
	}

	.btn-primary {
		background: linear-gradient(135deg, #2979ff, #1a6cff);
		color: white;
		border: none;
		box-shadow: 0 4px 12px rgba(41, 121, 255, 0.3);
	}

	.btn-primary-hover {
		background: linear-gradient(135deg, #1a6cff, #0d5fef);
		transform: translateY(-2px);
		box-shadow: 0 6px 16px rgba(41, 121, 255, 0.4);
	}

	.btn-outline {
		background: transparent;
		border: 1px solid #dcdfe6;
		color: #606266;
	}

	.btn-outline-hover {
		color: #2979ff;
		border-color: #2979ff;
		background-color: rgba(41, 121, 255, 0.05);
	}

	@media (max-width: 768px) {
		.edit-form {
			padding: 24px 16px;
		}

		.form-footer {
			flex-direction: column;
		}

		.btn {
			width: 100%;
		}
	}
</style>